<!DOCTYPE html><html lang="zh-CN"><head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>五神鸟：启元之年</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
  <link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&amp;family=ZCOOL+XiaoWei&amp;display=swap" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/lxgw-wenkai-webfont@1.1.0/style.css" rel="stylesheet">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    body {
      background: linear-gradient(135deg, #0a1a35 0%, #000000 100%);
      color: #f0f0f0;
      font-family: 'LXGW WenKai', 'Noto Sans SC', sans-serif;
      overflow-x: hidden;
    }
    
    .nav-glass {
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    
    .logo-glow {
      filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.7));
    }
    
    .hero-title {
      font-family: 'ZCOOL XiaoWei', 'Ma Shan Zheng', serif;
      color: #d4af37;
      text-shadow: 0 0 20px rgba(212, 175, 55, 0.8), 0 0 40px rgba(212, 175, 55, 0.5);
    }
    
    .hero-subtitle {
      font-family: 'ZCOOL XiaoWei', 'Ma Shan Zheng', serif;
    }
    
    .btn-gold-gradient {
      background: linear-gradient(45deg, #d4af37, #f9e076, #d4af37);
      background-size: 200% auto;
      color: #0a1a35;
      font-weight: bold;
      transition: 0.5s;
    }
    
    .btn-gold-gradient:hover {
      background-position: right center;
      transform: translateY(-3px);
      box-shadow: 0 10px 20px rgba(212, 175, 55, 0.3);
    }
    
    .btn-outline-gold {
      border: 2px solid #d4af37;
      color: #d4af37;
      transition: all 0.3s ease;
    }
    
    .btn-outline-gold:hover {
      background: rgba(212, 175, 55, 0.1);
      transform: translateY(-3px);
    }
    
    .card-zhuque {
      background: linear-gradient(135deg, rgba(200, 60, 60, 0.15) 0%, rgba(0, 0, 0, 0.4) 70%);
      position: relative;
      overflow: hidden;
    }
    
    .card-qingluan {
      background: linear-gradient(135deg, rgba(80, 200, 180, 0.15) 0%, rgba(0, 0, 0, 0.4) 70%);
      position: relative;
      overflow: hidden;
    }
    
    .card-jinwu {
      background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(0, 0, 0, 0.4) 70%);
      position: relative;
      overflow: hidden;
    }
    
    .card::before {
      content: '';
      position: absolute;
      top: 0;
      left: -150%;
      width: 150%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
      transform: skewX(-30deg);
      transition: 0.7s;
    }
    
    .card:hover::before {
      left: 150%;
    }
    
    .card-title {
      font-family: 'ZCOOL XiaoWei', 'Ma Shan Zheng', serif;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    }
    
    .divider-gold {
      height: 1px;
      background: linear-gradient(90deg, transparent, #d4af37, transparent);
    }
    
    .social-icon {
      transition: all 0.3s ease;
      border-radius: 50%;
    }
    
    .social-icon:hover {
      background: rgba(212, 175, 55, 0.1);
      transform: translateY(-5px);
    }
    
    .particle {
      position: absolute;
      background: rgba(212, 175, 55, 0.6);
      border-radius: 50%;
      pointer-events: none;
      animation: float 15s infinite linear;
    }
    
    .bg-pattern {
      position: absolute;
      width: 100%;
      height: 100%;
      background-image: url('/mb-potato/image/placeholder.svg');
      opacity: 0.03;
      background-repeat: repeat;
      z-index: -1;
    }
    
    @keyframes float {
      0%, 100% { transform: translate(0, 0); }
      20% { transform: translate(10px, 15px); }
      40% { transform: translate(20px, -10px); }
      60% { transform: translate(-15px, 20px); }
      80% { transform: translate(-20px, -15px); }
    }
    
    .nav-active-indicator {
      position: absolute;
      height: 3px;
      background: #d4af37;
      bottom: 0;
      transition: all 0.3s ease;
    }
    
    .hide-scrollbar {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }
    
    .hide-scrollbar::-webkit-scrollbar {
      display: none;
    }
  </style>
  <!-- 在<head>里添加importmap -->
  <script type="importmap">
    {
      "imports": {
        "three": "https://unpkg.com/three@0.162.0/build/three.module.js",
        "three/addons/": "https://unpkg.com/three@0.162.0/examples/jsm/"
      }
    }
  </script>
</head>
<body>
  <!-- 背景粒子效果 -->
  <div class="fixed inset-0 z-0" id="particles"></div>
  <div class="fixed inset-0 bg-pattern z-0"></div>
  
  <!-- 导航栏 -->
  <header class="nav-glass fixed top-0 w-full py-3 z-50 transition-all duration-300">
    <div class="container mx-auto px-6 flex justify-between items-center">
      <!-- Logo -->
      <div class="flex items-center">
        <iconify-icon class="logo-glow" icon="fa6-solid:feather-pointed" width="42" height="42" style="color: #d4af37"></iconify-icon>
        <h1 class="ml-3 text-xl font-bold text-white font-['ZCOOL_XiaoWei']">五神鸟</h1>
      </div>
      <!-- 导航链接 -->
      <nav class="relative">
        <ul class="flex space-x-8">
          <li class="relative">
            <a href="#" class="text-white hover:text-d4af37 transition-colors relative py-2">首页</a>
            <div class="nav-active-indicator w-full" style="width: 100%;"></div>
          </li>
          <li class="relative">
            <a href="神鳥傳説界面.html" class="text-gray-300 hover:text-d4af37 transition-colors py-2">神鸟传说</a>
          </li>
          <li class="relative">
            <a href="科技神韻界面.html" class="text-gray-300 hover:text-d4af37 transition-colors py-2">科技互动</a>
          </li>
          <li class="relative">
            <a href="文化传承.html" class="text-gray-300 hover:text-d4af37 transition-colors py-2">文化传承</a>
          </li>
          <li class="relative">
            <a href="关于我们.html" class="text-gray-300 hover:text-d4af37 transition-colors py-2">关于我们</a>
          </li>
        </ul>
      </nav>
      <!-- 右侧操作 -->
      <div class="flex items-center space-x-4">
        <div class="relative">
          <!-- <iconify-icon class="text-gray-300 hover:text-d4af37 cursor-pointer" icon="ion:search" width="24"></iconify-icon> -->
        </div>
        <!-- <button class="btn-outline-gold px-4 py-1 rounded-full text-sm flex items-center">
          <iconify-icon icon="ion:language" class="mr-1"></iconify-icon> 中文
        </button> -->
      </div>
    </div>
  </header>
  
  <!-- 主视觉区 -->
  <section class="relative min-h-screen flex items-center pt-20 overflow-hidden">
    <div class="container mx-auto px-6 relative z-10 flex flex-col md:flex-row items-center justify-between">
      <div class="max-w-2xl w-full md:w-1/2">
        <h1 class="hero-title text-6xl md:text-7xl leading-tight">
          探索你的本源神鸟 - <span class="block mt-2">觉醒之旅</span>
        </h1>
        <p class="hero-subtitle text-xl text-white mt-6 opacity-90">
          当远古的五方神鸟传说，遇上前沿的现代数字科技，一场跨越时空的梦幻之旅就此展开...
        </p>
        <div class="flex mt-10 space-x-4">
          <a href="人格测试.html" class="btn-gold-gradient px-8 py-3 rounded-full font-bold text-lg">
            探寻我的本源
          </a>
          <a href="视频播放界面.html" class="btn-outline-gold px-8 py-3 rounded-full font-bold text-lg">
            窥视神鸟世界
          </a>
        </div>
      </div>
      <!-- 右半区域：3D神鸟展示器 -->
      <div class="w-full md:w-1/2 flex justify-center items-center relative min-h-[500px]">
        <div id="bird-3d-container" class="relative w-[480px] h-[480px] flex items-center justify-center">
          <!-- 云层黎明底图 -->
          <canvas id="cloud-bg" width="480" height="480" class="absolute inset-0 rounded-full z-0 pointer-events-none"></canvas>
          <!-- 金丝环绕和碎点粒子 -->
          <div id="gold-glow" class="absolute inset-0 pointer-events-none z-10"></div>
          <!-- Three.js 3D模型展示区 -->
          <canvas id="bird-3d-canvas" class="rounded-full shadow-2xl border-4 border-amber-900 z-20" width="480" height="480"></canvas>
          <!-- 加载动画 -->
          <div id="bird-loader" class="absolute inset-0 flex items-center justify-center z-30 bg-black/60" style="display: none;">
            <svg width="80" height="80" viewBox="0 0 80 80" fill="none" class="animate-spin">
              <circle cx="40" cy="40" r="36" stroke="#d4af37" stroke-width="6" opacity="0.3"/>
              <path d="M40 8 Q60 40 40 72 Q20 40 40 8 Z" stroke="#d4af37" stroke-width="4" fill="none"/>
            </svg>
          </div>
          <!-- 全息底座与神鸟名称 -->
          <div id="bird-base" class="absolute bottom-0 left-1/2 -translate-x-1/2 w-72 h-20 flex flex-col items-center justify-center z-40">
            <div class="w-56 h-8 rounded-full bg-gradient-to-r from-[#d4af37] via-[#0a1a35] to-[#d4af37] blur-lg opacity-60"></div>
            <div id="bird-name" class="mt-2 text-xl font-bold text-amber-300 tracking-widest drop-shadow-lg">凤凰</div>
          </div>
        </div>
        <!-- 交互提示文本 -->
        <div class="absolute left-1/2 -translate-x-1/2 bottom-[-40px] text-sm text-gray-400 text-center w-full">
          这是...凤凰？！它要飞到哪里去？
        </div>
      </div>
    </div>
    <!-- 神鸟剪影（原有图片已移除） -->
  </section>
  
  <!-- 神鸟介绍区 -->
  <section class="py-20 relative z-10">
    <div class="container mx-auto px-6">
      <div class="text-center max-w-3xl mx-auto mb-16">
        <h2 class="hero-title text-4xl mb-4">五翼之谜</h2>
        <div class="divider-gold w-40 mx-auto my-6"></div>
        <p class="text-gray-300 text-lg">
          五神鸟是中华文化中的祥瑞象征，代表五方神力。探索这些神秘生物背后的文化内涵与科学解读。
        </p>
      </div>
      
      <!-- 卡片网格 -->
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <!-- 鹪明卡片 -->
        <a href="神鳥傳説界面.html#zhuque" class="block group">
          <div class="card card-zhuque rounded-xl p-6 cursor-pointer transition-all duration-300 hover:shadow-xl hover:shadow-red-500/10">
            <div class="relative">
              <div class="absolute -top-10 right-0">
                <iconify-icon icon="noto:phoenix" width="64" style="color: #c83c3c"></iconify-icon>
              </div>
              <h3 class="card-title text-2xl mb-4 text-red-300">鹪明</h3>
              <p class="text-gray-300 mb-6">
                南方神鸟，身披赤红羽毛。与五行之火的意象相关联，象征着礼仪与信义，能 “明礼守信”，分辨是非曲直。
              </p >
              <button class="btn-outline-gold px-4 py-2 rounded-full text-sm opacity-0 transition-all duration-300 group-hover:opacity-100 mt-4">
                探索鹪明文化 <iconify-icon icon="ion:arrow-forward" class="ml-1"></iconify-icon>
              </button>
            </div>
          </div>
        </a >
        
        <!-- 幽昌卡片 -->
        <a href="神鳥傳説界面.html#qingluan" class="block group">
        <div class="card card-qingluan rounded-xl p-6 cursor-pointer transition-all duration-300 hover:shadow-xl hover:shadow-cyan-500/10">
          <div class="relative">
            <div class="absolute -top-10 right-0">
              <iconify-icon icon="twemoji:peacock" width="64" style="color: #50c8b4"></iconify-icon>
            </div>
            <h3 class="card-title text-2xl mb-4 text-cyan-300">幽昌</h3>
            <p class="text-gray-300 mb-6">
              北方神鸟，羽毛漆黑如墨。与五行之水的意象相关联，象征着深邃与忠诚，能 “通幽达明”，洞察隐藏的规律，可预测风雨雷电等自然变化。
            </p>
            <button class="btn-outline-gold px-4 py-2 rounded-full text-sm opacity-0 transition-all duration-300 group-hover:opacity-100 mt-4">
              聆听神鸟之音 <iconify-icon icon="ion:arrow-forward" class="ml-1"></iconify-icon>
            </button>
          </div>
        </div>
        </a>
        
        <!-- 发明卡片 -->
         <a href="神鳥傳説界面.html#jinwu" class="block group">
        <div class="card card-jinwu rounded-xl p-6 cursor-pointer transition-all duration-300 hover:shadow-xl hover:shadow-yellow-500/10">
          <div class="relative">
            <div class="absolute -top-10 right-0">
              <iconify-icon icon="noto-v1:sun" width="64" style="color: #d4af37"></iconify-icon>
            </div>
            <h3 class="card-title text-2xl mb-4 text-amber-300">发明</h3>
            <p class="text-gray-300 mb-6">
              东方神鸟，全身呈青色。与五行之木的意象相关联，象征着智慧与仁德，能 “知时识变”，提前感知季节更替，提醒人们春耕播种。
            </p>
            <button class="btn-outline-gold px-4 py-2 rounded-full text-sm opacity-0 transition-all duration-300 group-hover:opacity-100 mt-4">
              体验太阳之旅 <iconify-icon icon="ion:arrow-forward" class="ml-1"></iconify-icon>
            </button>
          </div>
        </div>
      </div>
      </a>

      <a href="神鳥傳説界面.html#bifang" class="block group">
      <div class="text-center mt-16">
        <button class="btn-outline-gold px-6 py-3 rounded-full font-medium text-lg" onclick="window.location.href='神鳥傳説界面.html'">
          发现更多神鸟传奇
        </button>
      </div>
      </a>
    </div>
  </section>
  
  <!-- 互动科技展示区 -->
  <section class="py-20 bg-black/30 relative">
    <div class="absolute inset-0 opacity-30" style="background: url('/mb-potato/image/placeholder.svg') repeat; background-size: 300px;"></div>
    <div class="container mx-auto px-6 relative z-10">
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
        <div>
          <h2 class="hero-title text-4xl mb-6">科技，是你探索这个世界的权能</h2>
          <p class="text-gray-300 text-lg mb-8 leading-relaxed">
            你已经踏入一个有五只神鸟共同守护的古老世界。他们的力量维系着这里的平衡与智慧，而今，一段穿越时空的传奇正等待你的亲历。
          </p>
          <div class="grid grid-cols-2 gap-6 mt-10">
            <div>
              <div class="flex items-center mb-3">
                <iconify-icon icon="ic:outline-vr-pano" class="text-gold-400 mr-2" width="24"></iconify-icon>
                <a href="VR探索.html" class="text-xl text-amber-200">VR时空穿梭装置</a>
              </div>
              <p class="text-gray-400 text-sm">激活它，你将不再听闻传说，而是化身其中，亲历神鸟时代的波澜壮阔。</p>
            </div>
            <div>
              <div class="flex items-center mb-3">
                <iconify-icon icon="mdi:artificial-intelligence" class="text-gold-400 mr-2" width="24"></iconify-icon>
                <a href="AI交互.html" class="text-xl text-amber-200">识律之瞳</a>
              </div>
              <p class="text-gray-400 text-sm">启动识律之瞳，你的视野将穿透表象解析万物关联，洞见神话传说背后运行的底层逻辑与智慧。</p>
            </div>
            <div>
              <div class="flex items-center mb-3">
                <iconify-icon icon="mdi:projector-screen" class="text-gold-400 mr-2" width="24"></iconify-icon>
                <a href="光影之主.html" class="text-xl text-amber-200">光影圣殿</a>
              </div>
              <p class="text-gray-400 text-sm">步入神鸟缔造的数字秘境，沉浸于它们用光影诉说的永恒史诗。</p>
            </div>
            <div>
              <div class="flex items-center mb-3">
                <iconify-icon icon="mdi:blockchain" class="text-gold-400 mr-2" width="24"></iconify-icon>
                <a href="数字神鸟珍藏馆.html" class="text-xl text-amber-200">神圣信物</a>
              </div>
              <p class="text-gray-400 text-sm">收集由神鸟力量凝聚而成的数字化身，将传奇的碎片化为你的永恒珍藏。</p>
            </div>
          </div>
        </div>
        <div class="relative bg-black/70 rounded-xl overflow-hidden border border-amber-900 p-4">
          <video src="神鸟.mp4" controls autoplay loop muted class="w-full rounded-lg h-96 object-cover"></video>
          <div class="absolute bottom-4 left-4 bg-amber-800/80 text-amber-100 px-4 py-2 rounded-full">
            <div class="flex items-center">
              <div class="h-3 w-3 bg-red-500 rounded-full mr-2"></div>
              <span class="text-sm font-semibold">实时交互演示中</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  
  <!-- 页脚 -->
  <footer class="py-12 border-t border-amber-900 relative z-10">
    <div class="container mx-auto px-6">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
        <div>
          <div class="flex items-center mb-6">
            <iconify-icon icon="fa6-solid:feather-pointed" width="32" style="color: #d4af37"></iconify-icon>
            <h3 class="text-xl font-bold ml-2">五神鸟</h3>
          </div>
          <p class="text-gray-400 text-sm leading-relaxed">
            以现代科技演绎传统文化，打造文化传承新体验，传统与未来的创新实验室。
          </p>
        </div>
        <div>
          <h4 class="text-amber-200 text-lg mbPrefab-4 pb-2 border-b border-amber-800">探索之旅</h4>
          <ul class="text-gray-400 space-y-2">
            <li><a href="神鳥傳説界面.html" class="hover:text-amber-200 transition-colors">神鸟传说</a></li>
            <li><a href="AI交互.html" class="hover:text-amber-200 transition-colors">互动知识图谱</a></li>
            <li><a href="VR探索.html" class="hover:text-amber-200 transition-colors">VR时空穿梭</a></li>
            <li><a href="数字神鸟珍藏馆.html" class="hover:text-amber-200 transition-colors">数字收藏馆</a></li>
          </ul>
        </div>
        <div>
          <h4 class="text-amber-200 text-lg mb-4 pb-2 border-b border-amber-800">关于团队</h4>
          <ul class="text-gray-400 space-y-2">
            <li><a href="团队信息.html" class="hover:text-amber-200 transition-colors">项目起源</a></li>
            <li><a href="团队信息.html" class="hover:text-amber-200 transition-colors">创意伙伴</a></li>
            <li><a href="团队信息.html" class="hover:text-amber-200 transition-colors">心路历程</a></li>
            <li><a href="团队信息.html" class="hover:text-amber-200 transition-colors">未来构想</a></li>
          </ul>
        </div>
        <div>
          <h4 class="text-amber-200 text-lg mb-4 pb-2 border-b border-amber-800">关注我们</h4>
          <p class="text-gray-400 text-sm mb-4">
            获取最新展览信息、活动公告和独家内容更新
          </p>
          <div class="flex space-x-4">
            <a class="social-icon w-10 h-10 flex items-center justify-center border border-amber-700" href="https://mp.weixin.qq.com/s/Gd91N-0lKqXblMExLEWIxw">
              <iconify-icon icon="mdi:wechat" width="24" style="color: #d4af37"></iconify-icon>
            </a>
            <a class="social-icon w-10 h-10 flex items-center justify-center border border-amber-700" href="#">
              <iconify-icon icon="mdi:weibo" width="24" style="color: #d4af37"></iconify-icon>
            </a>
            <a class="social-icon w-10 h-10 flex items-center justify-center border border-amber-700" href="#">
              <iconify-icon icon="mdi:tiktok" width="24" style="color: #d4af37"></iconify-icon>
            </a>
          </div>
          <div class="mt-6">
            <p class="text-gray-400 text-sm mb-2">邮箱:2720329167@qq.com</p>
            <p class="text-gray-400 text-sm">电话: +86 186 2636 3570</p>
          </div>
        </div>
      </div>
      <div class="divider-gold w-full my-10"></div>
      <div class="text-center text-gray-500 text-sm">
        © 2025 五神鸟文化科技项目 | 用创新思维连接过去与未来 | 传统文化与科技融合的创新平台
      </div>
    </div>
  </footer>
  
  <script>
    // 创建背景粒子效果
    function createParticles() {
      const container = document.getElementById('particles');
      const particleCount = 30;
      
      for (let i = 0; i < particleCount; i++) {
        const particle = document.createElement('div');
        particle.classList.add('particle');
        
        // 随机属性
        const size = Math.random() * 4 + 1;
        const posX = Math.random() * 100;
        const posY = Math.random() * 100;
        const animationDuration = Math.random() * 10 + 15;
        
        particle.style.width = `${size}px`;
        particle.style.height = `${size}px`;
        particle.style.left = `${posX}%`;
        particle.style.top = `${posY}%`;
        particle.style.animationDuration = `${animationDuration}s`;
        particle.style.opacity = Math.random() * 0.6 + 0.2;
        
        container.appendChild(particle);
      }
    }
    
    // 导航透明度随滚动变化
    function handleNavOpacity() {
      const header = document.querySelector('header');
      const scrollPosition = window.scrollY;
      
      if (scrollPosition > 50) {
        header.style.background = 'rgba(0, 0, 0, 0.85)';
      } else {
        header.style.background = 'rgba(0, 0, 0, 0.7)';
      }
    }
    
    // 初始化
    document.addEventListener('DOMContentLoaded', () => {
      createParticles();
      window.addEventListener('scroll', handleNavOpacity);
      
      // 卡片悬停效果增强
      const cards = document.querySelectorAll('.card');
      cards.forEach(card => {
        card.addEventListener('mouseenter', function() {
          const btn = this.querySelector('button');
          if (btn) {
            btn.style.opacity = '1';
            btn.style.transform = 'translateY(0)';
          }
        });
        
        card.addEventListener('mouseleave', function() {
          const btn = this.querySelector('button');
          if (btn) {
            btn.style.opacity = '0';
            btn.style.transform = 'translateY(10px)';
          }
        });
      });
    });
  </script>
  <!-- 删除script标签 -->
<script type="module">
import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

const canvas = document.getElementById('bird-3d-canvas');
const renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true });
renderer.setSize(480, 480);
renderer.setClearColor(0x0a1a35, 1);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, 1, 0.1, 1000);
camera.position.set(0, 0, 10);
scene.add(camera);
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.08;
controls.enableZoom = false;
controls.target.set(0, -2, 0);
controls.update();
const ambientLight = new THREE.AmbientLight(0xffffff, 0.7);
scene.add(ambientLight);
const spotLight = new THREE.SpotLight(0xffffff, 1.2);
spotLight.position.set(0, -2, 6);
scene.add(spotLight);

let birdMesh = null;
let mixer = null;
function loadPhoenixModel() {
  const loader = new GLTFLoader();
  loader.load(
    'models/fenghuang.glb',
    function(gltf) {
      if (birdMesh) scene.remove(birdMesh);
      birdMesh = gltf.scene;
      birdMesh.position.set(0, -3, 0);
      birdMesh.scale.set(0.008, 0.008, 0.008);
      scene.add(birdMesh);
      if (gltf.animations && gltf.animations.length > 0) {
        mixer = new THREE.AnimationMixer(birdMesh);
        gltf.animations.forEach(anim => {
          const action = mixer.clipAction(anim);
          action.play();
        });
      }
    }
  );
}
loadPhoenixModel();

let clock = new THREE.Clock();
function animate() {
  requestAnimationFrame(animate);
  if (mixer) mixer.update(clock.getDelta());
  controls.update();
  renderer.render(scene, camera);
}
animate();

// 云层黎明底图
const cloudCanvas = document.getElementById('cloud-bg');
const cloudCtx = cloudCanvas.getContext('2d');
function drawClouds() {
  // 渐变黎明色
  const grad = cloudCtx.createRadialGradient(240, 320, 60, 240, 240, 240);
  grad.addColorStop(0, '#ffe9b3');
  grad.addColorStop(0.3, '#ffd700');
  grad.addColorStop(0.6, '#b3eaff');
  grad.addColorStop(1, '#0a1a35');
  cloudCtx.fillStyle = grad;
  cloudCtx.fillRect(0, 0, 480, 480);
  // 云朵
  for (let i = 0; i < 12; i++) {
    const t = Date.now() / 1200 + i * 20;
    const x = 240 + Math.sin(t + i) * (120 + i * 5);
    const y = 260 + Math.cos(t + i * 2) * (60 + i * 3);
    const r = 38 + Math.sin(t + i * 1.5) * 12;
    cloudCtx.beginPath();
    cloudCtx.arc(x, y, r, 0, 2 * Math.PI);
    cloudCtx.fillStyle = `rgba(255,255,255,${0.10 + 0.10 * Math.sin(t + i)})`;
    cloudCtx.shadowColor = '#ffd700';
    cloudCtx.shadowBlur = 12;
    cloudCtx.fill();
    cloudCtx.shadowBlur = 0;
  }
}
function animateClouds() {
  drawClouds();
  requestAnimationFrame(animateClouds);
}
animateClouds();

// 金丝环绕和碎点粒子
const goldGlow = document.getElementById('gold-glow');
function createGoldParticles() {
  goldGlow.innerHTML = '';
  // 金丝环绕
  for (let k = 0; k < 3; k++) {
    const ring = document.createElement('div');
    ring.style.position = 'absolute';
    ring.style.left = '0';
    ring.style.top = '0';
    ring.style.width = '480px';
    ring.style.height = '480px';
    ring.style.border = `2px solid rgba(212,175,55,${0.18 + k*0.08})`;
    ring.style.borderRadius = '50%';
    ring.style.boxShadow = `0 0 32px 8px rgba(212,175,55,0.18)`;
    ring.style.pointerEvents = 'none';
    ring.style.transform = `scale(${1 + k*0.04})`;
    goldGlow.appendChild(ring);
  }
  // 金色碎点
  for (let i = 0; i < 36; i++) {
    const p = document.createElement('div');
    const angle = Math.random() * 2 * Math.PI;
    const radius = 230 + Math.random() * 10;
    p.style.position = 'absolute';
    p.style.width = p.style.height = Math.random() * 5 + 2 + 'px';
    p.style.left = 240 + Math.cos(angle) * radius - 3 + 'px';
    p.style.top = 240 + Math.sin(angle) * radius - 3 + 'px';
    p.style.background = 'radial-gradient(circle, #ffd700 60%, #d4af37 100%)';
    p.style.borderRadius = '50%';
    p.style.opacity = Math.random() * 0.7 + 0.2;
    p.style.filter = 'blur(1.2px)';
    p.style.pointerEvents = 'none';
    p.style.animation = `goldParticleFloat${i} 2.5s infinite linear`;
    const keyframes = `@keyframes goldParticleFloat${i} {0%{transform:scale(1);}50%{transform:scale(1.3);}100%{transform:scale(1);}}`;
    const styleSheet = document.createElement('style');
    styleSheet.textContent = keyframes;
    document.head.appendChild(styleSheet);
    goldGlow.appendChild(p);
    setTimeout(() => styleSheet.remove(), 3000);
  }
}
createGoldParticles();
setInterval(createGoldParticles, 2500);
</script>

</body></html>